<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        html,body{
            height: 100%;
            margin: 0;
            background: radial-gradient(gray 10%,black)
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main {width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        animation: 6s zhuan linear infinite;}
        @keyframes zhuan{
            0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
             100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
        }
        main div{position: absolute;
        width: 100%;
        height: 100%;}
        #a{background-image: url(10.jpg);
        background-size: 300px 300px;
        transform: translateZ(150px);}
         #b{background-image: url(20.jpg);
        background-size: 300px 300px;
        transform: translateZ(-150px)}
          #c{background-image: url(30.jpg);
        background-size: 300px 300px;
        transform: rotateX(90deg) translateZ(150px);}
           #d{background-image: url(40.jpg);
        background-size:300px 300px;
        transform: rotateX(-90deg) translateZ(150px);}
            #e{background-image: url(50.jpg);
        background-size:300px 300px;
        transform: rotateY(90deg) translateZ(150px);}
             #f{background-image: url(60.jpg);
        background-size:300px 300px;
        transform: rotateY(-90deg) translateZ(150px);}
             
    </style>
    <meta charset="UTF-8">
    <title>立方体</title>
</head>
<body>
    <main>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
        <div id="d"></div>
        <div id="e"></div>
        <div id="f"></div>
    </main>
</body>
</html>